<template>
	<view id="wallet">
		<view class="w_h">
			<text class="w_h_l">我的资产</text>
			<navigator class="w_h_r" url="/pages/wallet/medal-wall/medal-wall" hover-class="none">
				<text>勋章墙</text>
				<image src="/static/wallet/wallet_next.png" mode="widthFix"></image>
			</navigator>
		</view>
		<view class="wallet_tip">
			<image src="/static/wallet/wallet_warning_02.png" mode="widthFix"></image>
			<text>账户未实名认证，资产未存入钱包无法使用，3个月后将失去获取资格</text>
		</view>
		<view  class="wallet_bg" >
			<view class="w_b">
				<view class="w_b_t">
					<text>CoCo</text>
					<image src="/static/wallet/wallet_warning_01.png" mode="widthFix"></image>
				</view>
				<view class="w_b_b">
					<navigator class="w_b_tw" v-if="eyesStatus" hover-class="none" url="/pages/my/shenye-coin/shenye-coin">{{customer.coin}}</navigator>
					<image v-else class="open_eyes" src="/static/wallet/close_eyes.png" mode="widthFix"></image>
					<view class="eyes" @click="eyesShow">
					   <image src="/static/wallet/wallet_close_eyes.png" mode="widthFix" v-if="eyesStatus"></image>
					   <image src="/static/wallet/wallet_open_eyes.png" mode="widthFix" v-else></image>
					</view>
				</view>
			</view>
			<view class="w_b">
				<view class="w_b_t">
					<text class="w_b_tw">通分</text>
					<!-- <image src="/static/wallet/wallet_warning_01.png" mode="widthFix"></image> -->
				</view>
				<navigator class="w_b_b" hover-class="none" url="/pages/my/shenye-coin/shenye-coin">
					<text>{{customer.tPoint}}</text>
				</navigator>
			</view>
		</view>
		<view class="wallet_body">
			<view class="wb_h">
				<text class="wb_h_01">餐饮数字勋章名称</text>
				<text class="wb_h_02">区块链地址：fjaloijfalsdjfalkjsd846nsdf</text>
			</view>
			<view class="wallet_medal">
				<image class="wm_img wm_img_b01" src="/static/wallet/wallet_left.png" mode="widthFix" v-if="current != 0" @click="thePrevious"></image>
				<image class="wm_img wm_img_b01" src="/static/wallet/wallet_left01.png" mode="widthFix" v-if="current == 0"></image>
				<image class="wm_img wm_img_b02" src="/static/wallet/wallet_right.png" mode="widthFix" v-if="medalList.length > 0 && (medalList.length-1) != current" @click="next"></image>
				<image class="wm_img wm_img_b02" src="/static/wallet/wallet_right01.png" mode="widthFix" v-if="(medalList.length-1) == current"></image>
				<!-- <image class="wm_img wm_img_b02" src="/static/wallet/wallet_right01.png" mode="widthFix"></image> -->
				<swiper class="swiper" :current="current" @change="medalChange">
					<swiper-item v-for="(item,index) in medalList"  :key="index" >
						<view class="swiper-item">
							<image class="swiper-item-img" :src="item.img" mode=""></image>
							<!-- <view class="swiper-item-tip"></view> -->
						</view>
						<view class="swiper-item-name">{{item.name}}</view>
					</swiper-item>
<!-- 					<swiper-item>
						<view class="swiper-item">
							<image class="swiper-item-img" src="/static/wallet/other.png" mode=""></image>
							<view class="swiper-item-tip"></view>
						</view>
						<view class="swiper-item-name">逛吃能手</view>
					</swiper-item> -->
				</swiper>
			</view>
			<view class="wallet_info">
				<view class="wi_h">
					<view class="wi_l">ID:00019</view>
					<view class="wi_r" @click="openTip">
						<text>勋章加成：+61%</text>
						<image src="/static/wallet/wallet_warning_01.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="wi_line">
					<view class="wi_bg"></view>
				</view>
				<view class="wi_text">
					还需获取500点贡献值晋升美食雷达(400/900)
				</view>
			</view>
			<view class="wallet_my_assets">
				<!-- <view class="wma_h">我的资产</view> -->
				<view class="wma_l">
					<view class="wma_l_i" v-for="(item,eIndex) in myAssetsList" :key="eIndex" @click="jump(eIndex,item)">
						<image :src="item.img" mode=""></image>
						<text>{{item.name}}</text>
						<view class="wma_l_i_t wma_l_i_1" v-if="eIndex < 2 && item.status">{{item.text}}</view>
						<view class="wma_l_i_t wma_l_i_2" v-else-if="eIndex == 2 && item.status">{{item.text}}</view>
						<view class="wma_l_i_t wma_l_i_3" v-else-if="eIndex == 3 && item.status">{{item.text}}</view>
					</view>
				</view>
			</view>
			<view class="wallet_equity_nfr" v-if="cardNum > 0">
				<view class="wen_h">
					<text class="wen_h_w">权益NFR</text>
					<navigator class="wen_h_n" hover-class="none" url="/pages/wallet/equity-nfr/equity-nfr" v-if="logoStatus">
						<text>{{cardNum}}</text>
						<image src="/static/wallet/wallet_next02.png" mode="widthFix"></image>
					</navigator>
				</view>
				<view class="wen_h_b">
					<view class="wen_h_t">{{cardInfo.cardName}}</view>
					<view class="wen_h_s">
						<image :src="cardInfo.merchantIcon" v-if="cardInfo.merchantIcon != ''" mode="aspectFill"></image>
						<text>{{cardInfo.merchantName}}</text>
					</view>
					<view class="wen_h_i">
						<image :src="cardInfo.cover" mode="aspectFill"></image>
					</view>
				</view>

			</view>
		</view>
		<uni-popup ref="popup"  style="z-index:999;">
			<view class="popupBox">
				<view class="p_title">餐饮数字勋章</view>
				<view class="p_list">
					<view class="p_l_b">
						<text class="p_l_l">用途</text>
						<text>：</text>
						<text class="p_l_r">生产力加成（仅对餐饮行业生效）</text>
					</view>
					<view class="p_l_b">
						<text class="p_l_l">获取途径</text>
						<text>：</text>
						<text class="p_l_r">消费打卡、任务、转赠</text>
					</view>
					<view class="p_l_b">
						<text class="p_l_l">加成逻辑</text>
						<text>：</text>
						<text class="p_l_r">用户默认消费餐饮行业产出CoCo生产力为1%(消费100元可产出1CoCo)当前数字勋章加成后生产力为61%（消费100元可产出61CoCo）</text>
					</view>
					<view class="p_l_b">
						<text class="p_l_l p_l_end">餐饮数字勋章当前加成生产力</text>
						<text>：</text>
						<text class="p_l_r">60%逛吃能手（30%）</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="pupopEquity" :animation="true"  :title="'激活权益'" >
			<view class="dialogBox">
				<view class="title">激活权益</view>
				<view   style='padding-bottom: 60rpx;'>
				  <scroll-view scroll-y="true" class="historyScrollView" style="margin-top: 30rpx;">
					 <view class="codeNameBox" v-for="(item,voindex) in historyequityCard" :key="voindex">
						  <view class="name">{{item.name}} </view>
						  <view class="conten">
							  <view class="text">{{item.code}}</view>
							  <image src="@/static/my/copy.png" mode="" @click="copy(item.code)"></image>
						  </view>
					 </view>
				  </scroll-view>
				</view>
		    </view>
		</uni-popup>
		<!-- 自定义tabBar -->
		<tabBar :pagePath="'/pages/wallet/wallet'" :num="1"></tabBar>
	</view>
</template>

<script>
	import {
		getMyWalletInfo
	} from '@/api/wallet.js'
	export default {
		data() {
			return {
				historyequityCard: [],//历史权益卡
				eyesStatus:false,
				current:0,
				medalList:[
					{id:0,name:'逛吃能手',img:'/static/wallet/other.png'},
					{id:1,name:'逛22手',img:'/static/wallet/other.png'},
					{id:2,name:'逛59吃能手',img:'/static/wallet/other.png'},
				],
				myAssetsList:[
					{id:0,name:'幸运奖池',status:false,img:'/static/wallet/wallet_nav_01.png',text:'0',url:'/pages/wallet/lucky-prize-pool/lucky-prize-pool'},
					{id:1,name:'数字宝箱',status:false,img:'/static/wallet/wallet_nav_02.png',text:'0',url:'/pages/wallet/treasure-chest/treasure-chest'},
					{id:2,name:'盲盒券',status:false,img:'/static/wallet/wallet_nav_03.png',text:'0张',url:''},
					{id:3,name:'激活权益',status:false,img:'/static/wallet/wallet_nav_04.png',text:'0份',url:''},
				],
				logoStatus:false, //判断是否登录
				cardNum:0,//权益卡数量 
				cardInfo:{}, //权益卡
				customer: {}, //用户信息
			}
		},
		onShow() {
	    	if (this.$queue.getData('token') != undefined) {
				this.logoStatus = true
			}else{
				this.logoStatus = false
			}
			this.getMyWalletInfo()
			this.getNum() //权益卡数量
			this.getCustomerCardList() //权益卡信息
			this.getCustomer() //用户信息
		},
		methods: {
			// 幸运奖池、数字宝箱、盲盒券、激活权益 数量
			getMyWalletInfo(){
				var info = getMyWalletInfo().then(res=>{
					var data = res.result
					if(data.luckyPoolNum > 0 && data.luckyPoolNum != ""){
						this.myAssetsList[0].text = data.luckyPoolNum
						this.myAssetsList[0].status = true
					}
					if(data.equityNum > 0 && data.equityNum != ""){
						this.myAssetsList[1].text = data.equityNum
						this.myAssetsList[1].status = true
					}
					if(data.couponNum > 0 && data.couponNum != ""){
						this.myAssetsList[2].text = data.couponNum+'张'
						this.myAssetsList[2].status = true
					}
					if(data.equityNum > 0 && data.equityNum != ""){
						this.myAssetsList[3].text = data.equityNum+'份'
						this.myAssetsList[3].status = true
					}
				})
			},			
			// 复制
			copy(text) {
				if (text != '') {
					var _this = this
					_this.$copyText(text).then(
						res => {
							uni.showToast({
								title: '复制成功',
								icon: 'none'
							})
						}
					)
				}

			},
			// 显示隐藏 CoCo
			eyesShow(){
				this.eyesStatus = !this.eyesStatus
			},
			// 勋章转换
			medalChange(e){
				this.current = e.detail.current
				// console.log(e.detail.current)
			},
			// 上一个
			thePrevious(){
				if(this.current != 0){
					this.current --
				}
			},
			// 下一个
			next(){
				if((this.medalList.length-1) != this.current){
					this.current++
				}
				
			},
			// 获取用户信息
			async getCustomer() {
				var res = await this.$api.getCustomer()
				this.customer = res.data
			},
			//获取权益卡数量
			async getNum(){
			    var res = await this.$api.getCustomerCardFunctionType()
			    this.cardNum = res.result.equityNFR
			},
			// 获取卡包卷
			getCustomerCardList() {
			    var data = {
			        functionType: 2
			    }
				this.$api.getCustomerCardList(data).then(res => {
					var resdata = res.result
					if (resdata.length > 0) {
						this.cardInfo = resdata[0]
						
					
					}
				})
			},
			// 激活权益
			async getHistoryCardNoListByCustomer(){
			    var res = await this.$api.getHistoryCardNoListByCustomer()
			    this.historyequityCard = res.result
			},
			// 打开提示
			openTip(){
				this.$refs.popup.open()
			},
			// 跳转宝箱页面
			jump(index,item){
				if(item.url != ''){
					uni.navigateTo({
						url:item.url
					})
				}else if(item.id == 3){
					this.getHistoryCardNoListByCustomer()
					this.$refs.pupopEquity.open()
				}
			}
		}
	}
</script>

<style scoped>
	.w_h{
		width: 100%;
		box-sizing: border-box;
		padding: 34rpx 40rpx 0 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.w_h_l{
		color: #222222;
		font-size: 32rpx;
		font-weight: bold;
	}
	.w_h_r{
		background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.w_h_r image{
		width: 10rpx;
		height: 18rpx;
		margin-left: 10rpx;
	}
	
	.wallet_tip{
		display: flex;
		flex-direction: row;
		font-size: 26rpx;
		color: #CF2B2B;
		background: #FFF6F6;
		border-radius: 12rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		width: 690rpx;
		margin: 30rpx auto 0 auto;
		line-height: 36rpx;
	}
	.wallet_tip image{
		width: 28rpx;
		height: 28rpx;
		margin-right: 16rpx;
	}
	.wallet_tip text{
		flex: 1;
	}
	.wallet_bg{
		width: 630rpx;
		height: 286rpx;
		background: url('/static/wallet/wallet_bg.png') no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		margin-top: 40rpx;
		padding: 36rpx 70rpx 30rpx 70rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.w_b:first-child{
		margin-right: 132rpx;
	}
	.w_b_t{
		font-size: 30rpx;
		color: #5973A7;
		margin-bottom: 14rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;
	}
	.w_b_t image{
		width: 28rpx;
		height: 28rpx;
		margin-left: 14rpx;
	}
	.w_b_b{
		color: #FFFFFF;
		height: 60rpx;
		font-size: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.eyes{
		position: absolute;
		right: -50rpx;
		top: 0;
		width: 36rpx;
		height: 36rpx;
	}
	.eyes image{
		width: 100%;
		height: 100%;
	}
	.open_eyes{
		width: 100rpx;
		height: 58rpx;
		/* margin-top: 20rpx; */
	}
	.wallet_body{
		background: #F6F8FF;
		border-radius: 100rpx 100rpx 0 0;
		padding-top: 56rpx;
		padding-bottom: 80rpx;
		margin-top: -40rpx;
	}
	.wb_h{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.wb_h_01{
		font-size: 32rpx;
		color: #222222;
	}
	.wb_h_02{
		margin-top: 8rpx;
		font-size: 28rpx;
		color: #8A8EA1;
	}
	.wallet_medal{
		padding: 58rpx 64rpx 0 64rpx;
		position: relative;
	}
	.wm_img{
		width: 90rpx;
		position: absolute;
	}
	.wm_img_b01{
		left: 64rpx;
		top: 200rpx;
	}
	.wm_img_b02{
		right: 64rpx;
		top: 200rpx;
		
	}
	.wallet_medal .swiper{
		width: 100%;
		height: 450rpx;
		padding: 0 80rpx;
		box-sizing: border-box;
	}
	.wallet_medal .swiper-item{
		width: 332rpx;
		height: 346rpx;

		margin: 0 auto;
	}
	.swiper-item-name{
		width: 100%;
		text-align: center;
		color: #222222;
		font-size: 32rpx;
		margin-top: 38rpx;
		font-weight: bold;
	}
	.swiper-item-img{
		width: 100%;
		height: 100%;
	}
	
	.wallet_info{
		width: 690rpx;
		padding: 30rpx;
		margin: 0 auto;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}
	.wi_h{
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #222222;
		font-size: 30rpx;
	}
	.wi_r{
		color: #FF3A3A;
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	.wi_r image{
		width: 32rpx;
		height: 32rpx;
		margin-left: 10rpx;
	}
	.wi_line{
		width: 100%;
		height: 24rpx;
		background: #EDEDED;
		border-radius: 200rpx;
		margin-top: 16rpx;
	}
	.wi_bg{
		width: 50%;
		height: 100%;
		border-radius: 200rpx;
		background: linear-gradient(90deg, #3970FF 0%, #FF3CE7 56.59%, #FFCA62 98.24%);
	}
	.wi_text{
		margin-top: 24rpx;
		font-size: 24rpx;
		color: #8A8EA2;
	}
	
	.wallet_my_assets,.wallet_equity_nfr{
		width: 690rpx;
		margin: 0 auto;
		
	}
	.wallet_my_assets{
		margin-top: 30rpx;
	}
	.wma_h{
		font-size: 32rpx;
		font-weight: 600;
		padding: 40rpx 0;
		color: #2C2A2F;
	}
	.wma_l{
		width: 100%;
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.wma_l_i{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.wma_l_i image{
		width: 56rpx;
		height: 56rpx;
	}
	.wma_l_i text{
		margin-top: 16rpx;
		font-size: 26rpx;
		color: #222222;
	}
	.wma_l_i_t{
		position: absolute;
		padding: 6rpx;
		font-size: 18rpx;
		color: #FFFFFF;
		background: #FF3A3A;	
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.wma_l_i_1{
		top: -2rpx;
		right: 4rpx;
		border-radius: 50%;
		width: 20rpx;
		height: 20rpx;
	}
	.wma_l_i_2{
		top: -2rpx;
		right: -28rpx;
		padding: 0 10rpx;
		border-radius: 200rpx;
	}
	.wma_l_i_3{
		top: -2rpx;
		right: -19rpx;
		padding: 0 10rpx;
		border-radius: 200rpx;
	}
	
	.wallet_equity_nfr{
		
	}
	.wen_h{
		font-size: 32rpx;
		color: #222222;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 50rpx;
		padding-bottom: 30rpx;
	}
	.wen_h_n{
		color: #2C2A2F;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx #CCD0E3;
		border-radius: 200rpx;
		padding: 2rpx 16rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	.wen_h_n image{
		margin-top: 2rpx;
		width: 10rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}
	.wen_h_b{
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 32rpx;
	}
	.wen_h_t{
		color: #222222;
		font-size: 30rpx;
		margin-bottom: 18rpx;
		font-weight: bold;
	}
	.wen_h_s{
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #222222;
		font-size: 24rpx;
	}
	.wen_h_s image{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 12rpx;
	}
	.wen_h_i{
		width: 100%;
		height: 314rpx;
		margin-top: 26rpx;
	}
	.wen_h_i image{
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
	}
	
	/* 弹窗 */
	.popupBox{
		width: 650rpx;
	    background: #fff url('@/static/newsImg/my_number_bg.jpg') no-repeat;
	    background-size: 100% auto;
		border-radius: 20rpx;
		padding-bottom: 72rpx;
	}
	.p_title{
		font-size: 40rpx;
		color: #222222;
		width: 100%;
		padding-top: 50rpx;
		padding-bottom: 56rpx;
		text-align: center;
		font-weight: 600;
	}
	.p_list{
		width: 100%;
		padding-left: 40rpx;
		box-sizing: border-box;
		padding-right: 10rpx;
		margin-bottom: 14rpx;
		line-height: 52rpx;
	}
	.p_l_b{
/* 		display: flex;
		flex-flow: wrap; */
		color: #222222;
		font-size: 30rpx;
		flex-shrink: 0;
	}
	.p_l_l{
		display:inline-block;
		font-size: 30rpx;
		font-weight: bold;
		width: 4em;        text-align-last: justify;
	}
	.p_l_r{
		/* display:inline-block; */
	}
	.p_l_end{width: auto;}
	/* end */
	
	/* */
	.historyScrollView{
	     max-height: 600rpx;
	 }
	 /deep/ .historyScrollView ::-webkit-scrollbar{
	 	display: none;
	 }
	 .dialogBox{
	     width: 560rpx;
	     border-radius: 20rpx;
	     position: relative;
	     z-index: 999;
	     background:linear-gradient(180deg, #EFE0FF 0%, #E1E9FF 10.79%,#FFFFFF 100%);
		 
	 }
	 .dialogBox .title{
	     width: 85%;
	 	margin: 0 auto;
	     text-align: center;
	     padding-top: 40rpx;
	     font-size: 36rpx;
	     color: #333;
	     font-weight: 500;
	 }
	 .codeNameBox{
	     margin: 0 24rpx 30rpx 24rpx;
	     background: #fff;
	     padding: 24rpx;
	     border-radius: 20rpx;
	     box-shadow: 0px 0px 8px #EAEAEA;
	 }
	 .codeNameBox .name{
	     font-size: 30rpx;
	     color: #222;
	 }
	 .codeNameBox .conten{
	     display: flex;
	     justify-content: space-between;
	 }
	 .codeNameBox .conten .text{
	     width: 380rpx;
	     color: #333;
	     word-break:break-all;  
	     word-wrap:break-word;  
	 }
	 .codeNameBox .conten image{
	     width: 34rpx;
	     height: 36rpx;
	 }
	 .currenNameBox{
	     margin: 0 24rpx 30rpx 24rpx;
	     background: #fff;
	     padding: 24rpx;
	     border-radius: 20rpx;
	     box-shadow: 0px 0px 8px #EAEAEA;
	 }
	 .currenNameBox .head_b{
	     display: flex;
	     justify-content: space-between;
	     font-size: 30rpx;
	     color: #222;
	 }
	.currenNameBox .conten{
	    font-size: 28rpx;
	    color: #666;
	    margin-top: 14rpx;
	}
	/* end */
</style>
